<template>
<div>
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="tabClick">
    <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="item.index"
        :label="item.name"
        :name="item.index"
    >

    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import router from "@/router";

export default {
  name: "Tabs",
  data() {
    return {

    }
  },
  computed:{
    editableTabs:{
      get(){
        return this.$store.state.menu.editableTabs
      },
      set(val){
        this.$store.state.menu.editableTabs=val
      }
    },
    editableTabsValue:{
      get(){
        return this.$store.state.menu.editableTabsValue
      },
      set(val){
        this.$store.state.menu.editableTabsValue=val
      }
    },
  },
  methods: {
    tabClick(tar){
      if(tar.name!==null) {
        if(tar.name=='Index'){
          router.push({name:'Index'})
          return
        }
        this.editableTabsValue=tar.name
        router.push({name: 'Sys' + tar.name})
      }
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeIndex = this.editableTabsValue;
      if(targetName==='Index'){
        return
      }
      if (activeIndex === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.index === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeIndex = nextTab.index;
            }
          }
        });
      }

      this.editableTabsValue = activeIndex;
      this.editableTabs = tabs.filter(tab => tab.index !== targetName);
      if(activeIndex==='Index'){
        router.push({name:activeIndex})
        return;
      }
      router.push({name:'Sys'+activeIndex})
    }
  }
}

</script>

<style scoped>

</style>